<template>
  <div
    v-show="approveHistoryList != []"
    class="stepsBox"
    :class="isCreatePage && !noneOperation ? 'isCreatePage' : ''"
  >
    <el-steps :active="approveHistoryList.length - 1">
      <el-step
        :title="item.name"
        v-for="(item, index) in approveHistoryList"
        :key="index"
        :class="item.isApprovering === '1' ? 'isNotLast' : 'isLast'"
      >
        <template #icon>
          <el-icon v-if="item.isApprovering == '1'" color="#45b8fd" :size="20">
            <CircleCheck />
          </el-icon>
          <el-icon v-else color="#FFFFFF" class="more" :size="16"><MoreFilled /></el-icon>
        </template>
        <template #description>
          <div>
            <div class="description">
              <el-tag
                disable-transitions
                size="small"
                v-if="item.isApprovering != '0'"
                :type="item.type == 'Reject' ? 'danger' : ''"
              >
                {{ item.type }}
              </el-tag>
            </div>
            <div class="time" style="margin-top: 6px">
              {{ logFormatDate(item.approveDate) }}
            </div>
            <div class="description">{{ item.description }}</div>
          </div>
        </template>
      </el-step>
    </el-steps>
    <el-empty
      v-if="approveHistoryList?.length == 0"
      description="No Data"
      style="display: flex; width: 100%; height: 100%; max-height: 260px"
    ></el-empty>
  </div>
</template>
<script setup>
import { MoreFilled, CircleCheck } from '@element-plus/icons-vue';
import moment from 'moment';
const props = defineProps({
  approveHistoryList: {
    type: Array,
    required: true,
  },
  isCreatePage: {
    type: Boolean,
    required: false,
    default: false,
  },
  noneOperation: {
    type: Boolean,
    default: false,
    required: false,
  },
});
const emit = defineEmits([]);

const init = () => {};

// 修改时间格式
const logFormatDate = date => {
  if (date == null || date == '') return '';
  return moment(date, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
};
</script>
<style lang="scss" scoped>
.more {
  border-color: #5fe3a1;
  background: #5fe3a1;
  border-radius: 50%;
  padding: 2px;
}
</style>
